<!--
 * @Description: 用户打卡信息相关页面
 * @Version: 1.0
 * @Author: Yuanjy
 * @Date: 2020-04-02 22:52:35
 * @LastEditors: Yuanjy
 * @LastEditTime: 2020-05-29 15:04:11
 -->
<template>
  <div class="user">
    <div class="user-box">
      <div class="tit">用户打卡信息及评价信息（{{ date }}）
        <div class="clearfix user-info user-picker fr">
          <el-date-picker v-model="datepicker" type="date" size="small" value-format="yyyy-MM-dd" placeholder="选择日期" class="fr" @change="getDietInfo" />
        </div>
      </div>
      <div class="user-content">
        <div>
          <div class="user-box">
            <div class="tit clearfix">营养师评价</div>
            <div class="user-content pd20-10 evaluate">
              <div class="clearfix"> <!-- 按照项目评分 -->
                <div class="fl score-box">
                  <el-button :disabled="!breakfast.id && !lunch.id && !supper.id" type="success" @click="goGrade">评  分</el-button>
                  <div class="score"><span v-if="diet_score>0">{{ diet_score }}</span></div>
                </div>
                <div class="fl score-analyse">
                  <div v-if="diet_score>0">
                    <div class="score-analyse-tit" >减分项分析</div>
                    <div class="score-analyse-main">
                      <p v-for="(reduce,index) in diet_scoring_reduce_item" :key="index">
                        <span class="reduce-title">{{ reduce.cate_name }}：<span>{{ reduce.total_score }}</span></span>
                        <span v-for="(item,rindex) in reduce.items" :key="rindex" class="reduce-items">【{{ item.item_name }}：<span>{{ item.score }}</span>】</span>
                      </p>
                    </div>
                  </div>
                  <div v-else class="no-score">未评分</div>
                </div>
              </div>
            </div>
          </div>
          <div class="meals-remark">备注：<span>{{ dataremark }}</span></div>
          <el-tabs v-model="activeMeal">
            <el-tab-pane label="早餐" name="breakfast" style="background: #ddeff4">
              <dietComment :diet-data="breakfast" :meal-type="'breakfast'" :service-id="+serviceId" @getDietInfo="getDietInfo" />
            </el-tab-pane>
            <el-tab-pane label="午餐" name="lunch" style="background: #ddeff4" >
              <dietComment :diet-data="lunch" :meal-type="'lunch'" :service-id="+serviceId" @getDietInfo="getDietInfo" />
            </el-tab-pane>
            <el-tab-pane label="晚餐" name="supper" style="background: #ddeff4" >
              <dietComment :diet-data="supper" :meal-type="'supper'" :service-id="+serviceId" @getDietInfo="getDietInfo" />
            </el-tab-pane>
            <el-tab-pane label="体重" name="weight" style="background: #ddeff4; padding-bottom:20px;" >
              <div v-if="weight.value !== 0" class="weight-body">
                <div class="fl score-box">
                  <div class="weight-note">今日体重</div>
                  <div class="weight-value"><span>{{ weight.value }}</span>KG</div>
                  <div class="weight-editor">
                    <el-button type="primary" @click="showUpdatewt">修改体重</el-button>
                  </div>
                </div>
                <div class="weight-img">
                  <img :src="weight.img" alt="" @click="bigShow(weight.img)">
                </div>
              </div>
              <div v-else class="weight-body">
                未打卡
              </div>
            </el-tab-pane>
          </el-tabs>
          <div class="recipe user-box">
            <div class="tit clearfix">用户推荐食谱 <span v-if="recipe_status === 2" class="day-time">(第{{ recipeCase.service_day }}天)</span> </div>
            <div class="user-content pd20-10">
              <div>
                <el-tabs v-model="recipeMeal">
                  <el-tab-pane label="早餐" name="breakfast" style="background: #ddeff4">
                    <recipe v-if="recipeCase.recipe" :diets="recipeCase.recipe.breakfast" />
                  </el-tab-pane>
                  <el-tab-pane label="早加餐" name="breakfast_extra" style="background: #ddeff4">
                    <recipe v-if="recipeCase.recipe" :diets="recipeCase.recipe.breakfast_extra" />
                  </el-tab-pane>
                  <el-tab-pane label="午餐" name="lunch" style="background: #ddeff4">
                    <recipe v-if="recipeCase.recipe" :diets="recipeCase.recipe.lunch" />
                  </el-tab-pane>
                  <el-tab-pane label="午加餐" name="lunch_extra" style="background: #ddeff4">
                    <recipe v-if="recipeCase.recipe" :diets="recipeCase.recipe.lunch_extra" />
                  </el-tab-pane>
                  <el-tab-pane label="晚餐" name="dinner" style="background: #ddeff4">
                    <recipe v-if="recipeCase.recipe" :diets="recipeCase.recipe.supper" />
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="updateWeightShow" title="修改体重">
      <div class="input-group">
        <label>用户体重：</label>
        <div class="input-group-box weight-input">
          <el-input v-model="weightnew" />公斤
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button :plain="true" @click="updateWeightShow = false">取 消</el-button>
        <el-button type="primary" @click="updateWeight">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="gradeShow" class="gradeShow">
      <div class="clearfix">
        <div class="fl diets-box">
          <div class="diet-score">
            <div class="diet-score-tit">早餐</div>
            <div class="recommend-diet-tit">推荐食谱</div>
            <div v-if="recipeCase.recipe" class="recommend-diet">
              <recipe :diets="recipeCase.recipe.breakfast" />
            </div>
            <mydiet v-if="breakfast.id" :imgs="breakfast.img" title="用户的早餐" @bigPicture="bigShow" />
          </div>
          <div class="diet-score">
            <div class="diet-score-tit">午餐</div>
            <div class="recommend-diet-tit">推荐食谱</div>
            <div v-if="recipeCase.recipe" class="recommend-diet">
              <recipe :diets="recipeCase.recipe.lunch" />
            </div>
            <mydiet v-if="lunch.id" :imgs="lunch.img" title="用户的午餐" @bigPicture="bigShow" />
          </div>
          <div class="diet-score">
            <div class="diet-score-tit">晚餐</div>
            <div class="recommend-diet-tit">推荐食谱</div>
            <div v-if="recipeCase.recipe" class="recommend-diet">
              <recipe :diets="recipeCase.recipe.supper" />
            </div>
            <mydiet v-if="supper.id" :imgs="supper.img" title="用户的晚餐" @bigPicture="bigShow" />
          </div>
        </div>
        <div class="fl grade-items-box">
          <div class="grade-items">
            <div class="grade-item clearfix">
              <div class="diet-score-tit fl">打分项</div>
              <div class="diet-score-tit fr">得分</div>
            </div>
            <div v-for="(item, index) in scoreItemlist" :key="index" class="grade-item clearfix">
              <div class="grade-item-note fl">{{ item.cate_name }}：{{ item.item_name }}<span>({{ item.max_score }})</span></div>
              <div class="grade-item-score fr">
                <el-input-number v-model="item.food_item" :data-index="index" :min="item.min_score" :max="item.max_score" size="small" @change="scoreChange($event, index)" />
              </div>
            </div>
            <div class="grade-all">当前总分：<span>{{ scoreAll }}分</span></div>
            <el-button :disabled="isScoreSubmit" :loading="isScoreLoading" class="grade-btn" @click="scoreSubmit">提交分数</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Vue from 'vue'
import loading from '@/views/components/loading'
import recipe from './recipeModule/recommend'
import mydiet from './punchModule/mydiet'
import dietComment from './punchModule/dietComment'
import { formatTime, isEmptyArray } from '@/utils'

export default {
  components: {
    loading, recipe, mydiet, dietComment
  },
  props: {
    dataremark: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      serviceId: 0,
      updateWeightShow: false,
      option: null,
      options: [],
      date: '',
      breakfast: {},
      lunch: {},
      supper: {},
      commentList: [],
      diet_score: '',
      datepicker: '',
      meal: '',
      score: '',
      bigImg: '',
      bigImgShow: false,
      activeMeal: 'breakfast',
      load: true,
      recipeMeal: 'breakfast',
      recipe_data: {},
      recipeCase: {},
      recipe_status: 2,
      replyIndex: 0,
      replyUpdate: false,
      gradeShow: false,
      diet_scoring_reduce_item: [], // 减分项分析
      scoreItemlist: [], // 打分项
      scoreAll: 100, // 总分
      isScoreSubmit: false, // 按照评分项评分提交按钮是否可以提交
      isScoreLoading: false,
      weight: {},
      weightnew: '',
      uid: ''
    }
  },
  created() {
    if (this.$route.query.item_type) {
      this.activeMeal = this.$route.query.item_type
      this.recipeMeal = this.$route.query.item_type
    }
  },
  methods: {
    initData(serviceId) {
      this.serviceId = serviceId
      if (this.$route.query.date) {
        this.datepicker = this.date = this.$route.query.date
      } else {
        this.datepicker = this.date = formatTime(new Date(), 'yyyy-MM-dd')
      }
      this.getDietInfo(this.date)
    },
    showUpdatewt() {
      this.updateWeightShow = true
    },
    updateWeight() {
      this.$api.punch.punch
        .modifyWeight({
          data: {
            service_id: this.serviceId,
            date: this.date,
            weight: this.weightnew
          }
        })
        .then(res => {
          this.updateWeightShow = false
          this.weight.value = this.weightnew
          this.$notify({ title: '成功', message: '修改体重成功', type: 'success', duration: 2500 })
        }).catch(err => {
          console.log(err)
        })
    },
    getOneRecipe() {
      this.$api.order.service
        .getOneRecipe({
          params: { service_id: this.serviceId, date: this.date }
        })
        .then(res => {
          this.recipeCase = res.data
        }).catch(err => {
          console.log(err)
        })
    },
    getDietInfo(val = null) {
      if (val) {
        this.date = val
      }
      this.load = true
      this.$api.punch.punch
        .getDietInfo({
          params: { service_id: this.serviceId, date: this.date }
        })
        .then(res => {
          this.breakfast = this.lunch = this.supper = {}
          this.weight = res.data.weight
          this.weightnew = res.data.weight.value
          this.uid = res.data.weight.uid
          if (!isEmptyArray(res.data.breakfast)) this.breakfast = res.data.breakfast
          if (!isEmptyArray(res.data.lunch)) this.lunch = res.data.lunch
          if (!isEmptyArray(res.data.supper)) this.supper = res.data.supper

          this.commentList = res.data.comment_list
          this.load = false
          if (res.data.diet_score === -1 || res.data.diet_score === 0) {
            this.diet_score = '未评分'
          } else {
            this.diet_score = res.data.diet_score
          }
          this.diet_scoring_reduce_item = res.data.diet_scoring_reduce_item
          this.getOneRecipe()
        }).catch(err => {
          console.log(err)
        })
    },
    bigShow(img) {
      this.bigImg = img
      this.bigImgShow = true
    },
    getScoreItem() {
      this.$api.punch.punch
        .getScoreItem()
        .then(res => {
          this.scoreItemlist = res.data.list
          this.scoreItemlist.forEach((item, index) => {
            Vue.set(item, 'food_item', item.max_score)
            var gradeAll = 0
            this.scoreItemlist.forEach(item => {
              gradeAll += item.food_item
            })
            this.scoreAll = gradeAll
          })
        }).catch(err => {
          console.log(err)
        })
    },
    goGrade() {
      this.gradeShow = true
      this.getScoreItem()
    },
    scoreChange(event, sindex) { // 计算总分
      var scoreAll = 0
      this.scoreItemlist.forEach((item, index) => {
        if (sindex !== index) {
          scoreAll += item.food_item
        }
      })
      this.scoreAll = scoreAll + event
      this.scoreAll > 0 ? this.isScoreSubmit = false : this.isScoreSubmit = true
    },
    scoreSubmit() { // 提交分数
      this.isScoreLoading = true
      var map = {}
      this.scoreItemlist.forEach(list => { // 组装items
        const key = list.item_key
        if (!map[key]) {
          map[key] = list.food_item
        }
      })
      const param = {
        service_id: this.serviceId,
        date: this.date,
        diet_id: this.breakfast.id || this.lunch.id || this.supper.id,
        total_score: this.scoreAll,
        items: map
      }
      this.$api.punch.punch
        .evaluateDay({
          data: param
        })
        .then(res => {
          this.isScoreLoading = false
          this.gradeShow = false
          this.diet_score = this.scoreAll
          this.diet_scoring_reduce_item = res.data.diet_scoring_reduce_item
          this.$notify({ title: '提示', message: '评分提交成功', type: 'success', duration: 2500 })
        })
        .catch(err => {
          this.isScoreLoading = false
          this.$notify({ title: '提示', message: '评分提交失败', type: 'error', duration: 2500 })
        })
    }
  }
}
</script>

<style scoped>
.input-group {
  margin: 10px 0;
  display: flex;
}
.input-group label {
  float: left;
  flex: 0 0 100px;
  width: 100px;
  text-align: right;
  font-size: 14px;
  color: #999;
  line-height: 36px;
  padding-right: 15px;
  font-weight: normal;
}
.input-group label i, .p-tip i {
    color: red;
    font-size: 18px;
    margin-right: 8px;
    display: inline-block;
}
.user-picker {
  padding: 5px 20px;
}
.sign {
  font-size: 0;
}
.sign li {
  width: 200px;
  height: 220px;
  position: relative;
  display: inline-block;
  margin: 10px;
  border-radius: 4px;
  overflow: hidden;
}
.sign li img {
  width: 200px;
  height:220px;
}
.meals-remark {
  color: red;
  padding-left: 15px;
}
.evaluate {
  min-height: 3.4em;
  margin-bottom: 20px;
}
.evaluate .evaluate-item {
  padding: 0px 10px;
  line-height: 1.7;
  font-size: 14px;
  position: relative;
}
.evaluate .evaluate-item .evaluate-item-tit {
  position: absolute;
}
.evaluate-item .evaluate-content {
  margin-left: 70px;
}
.evaluate-item .evaluate-content .add_time {
  display: inline-block;
  margin-left: 20px;
  color: #aaaaaa;
}
.evaluate-item .evaluate-content .icon-reply {
  display: inline-block;
  font-size: 14px;
  color: #1eba56;
  margin-left: 6px;
}
.evaluate-item .evaluate-content .reply-name {
  color: #3cb9fc;
}
.evaluate .el-radio-group .el-radio{
  display: block;
  margin-left: 0;
  padding: 8px 0;
}
.evaluate .el-textarea{
  margin-top: 10px;
}
.evaluate .input-group label.elabel {
    flex: 0 0 85px;
    width: 85px;
    text-align: right;
    padding-right: 6px;
}
.evaluate .input-group label.elabel i {
  color: #f00;
}
.evaluate .el-radio {
    white-space: normal;
    display: block;
    flex: 0 0 100%;
    width: 100%;
    font-size: 14px;
    color: #222;
    line-height: 20px;
    padding-right: 0;
    text-align: left;
}
.bigimg img{
  width: 100%;
}
@keyframes changeheight{
  0% {
    height: 50px;
  }
  100% {
    height: auto;
  }
}
.diet-content{
  width: 50%;
  float: left;
}
.comment-content{
  width:50%;
  float: left;
}
.clear{
    clear:both;
  }
.comment-content .el-textarea{
    width:80%;
  }
.comment-btn{
  width:200px;
  background:#f7ba2a ;
  color: #fff;;
}
.submit-comment{ text-align: center;}
.comment-item-tit{
  float: left;
  flex: 0 0 100px;
  width: 100px;
  text-align: right;
  font-size: 14px;
  line-height: 36px;
  padding-right: 15px;
}
.evaluate-content{
  display: inline-block;
  padding-top: 5px;
  width: 80%;
}
.comment-list{
  margin-top: 40px;
}
.evaluate-content p{ line-height: 25px;}
.recipe-error{
   font-size: 14px;
   color: #ff0000;
   }
.day-time{
       font-weight:bold;
     }
.ball-clip-rotate > div {
   background-color: #279fcf;
   width: 15px;
   height: 15px;
   border-radius: 100%;
   margin: 2px;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
   border: 2px solid #279fcf;
   border-bottom-color: transparent;
   height: 25px;
   width: 25px;
   background: transparent !important;
   display: inline-block;
   -webkit-animation: rotate 0.75s 0s linear infinite;
   animation: rotate 0.75s 0s linear infinite;
   }
@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
    }
  50% {
    -webkit-transform: rotate(180deg) scale(0.6);
    transform: rotate(180deg) scale(0.6);
    }
  100% {
    -webkit-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
    }
}
.ball-clip-rotate{
       position: absolute;
       top: 40%;
       left: 10%;
     }
.loading-ball{
       height: 100%;
       display: block;
       width: 100%;
       background: rgba(0, 0, 0, 0.11);
       position: absolute;
     }
.score-box {
  width: 100px;
  text-align:center;
}
.score-box .score{
  color: #fa9a03;
  font-size: 50px;
  margin-top: 10px;
  line-height: 50px;
  height: 50px;
}
.weight-value{
  font-size: 14px;
  color:#949191;
}
.weight-value span{
  color: #fa9a03;
  font-size: 50px;
  margin-top: 10px;
  line-height: 50px;
  height: 50px;
}
.weight-note{
  padding-top: 20px;
  font-size: 15px;
  color: #000000;
  padding-bottom: 10px;
}
.weight-img img{
  width: 200px;
  margin-top: 20px;
  margin-left: 20px;
}
.weight-body{
  padding: 10px;
  box-sizing: border-box;
  font-size: 15px;
  min-height: 150px;
}
.weight-body .score-box{
  width: 150px;
}
.score-analyse {
  margin-left: 30px;
  border: 1px solid #eee;
  border-radius: 5px;
  min-height: 100px;
  width: 680px;
  padding: 10px;
}
.score-analyse .no-score {
  color: #ccc;
  text-align: center;
  line-height: 80px;
}
.score-analyse-main p {
  line-height: 1;
  margin: 4px 0;
}
.reduce-items {
  margin-left: 5px;
}
.reduce-items span {
  font-weight: bold;
  color: #fa9a03;
}
.reduce-title {
  font-weight: bold;
}
.reduce-title span {
  color:#f00;
}
.diet-score {
  border: 1px solid #ddd;
  padding: 12px;
  margin-bottom: 30px;
}
.recommend-diet {
  background: #ddeff4;
}
.diet-score-tit {
  font-weight: bold;
  font-size: 16px;
  line-height: 1;
  color: #20a0ff;
}
.recommend-diet-tit {
  font-size: 14px;
  line-height: 1;
  border-left: 3px solid #81bae2;
  margin: 15px 0 6px 0 ;
  text-indent: 5px;
}
.gradeShow .el-dialog--small{
  width: 60%;
}
.gradeShow .diets-box {
  width: 49%;
}
.gradeShow .grade-items-box {
  width: 49%;
  margin-left: 2%;
  border: 1px solid #ddd;
  box-sizing: border-box;
  padding: 12px;
}
.grade-item {
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}
.grade-item:last-child {
  border-bottom: none;
}
.grade-item-note {
  width: 65%;
  margin-right: 2%;
  height: 100%;
}
.grade-item-note span {
  color: #20a0ff;
}
.grade-item-score {
  width: 33%;
  height: 100%;
}
.grade-all {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
}
.grade-all span {
  font-size: 40px;
  color: #fa9a03;
}
.grade-items-box .grade-btn.el-button {
  width: 70%;
  margin-left: 15%;
  font-size: 14px;
  line-height: 14px;
  padding: 10px 0;
  background: #14ac08;
  margin-top: 20px;
  color: #fff;
  border-radius: 20px;
  text-align: center;
  font-weight: bold;
  border: none;
}
.grade-items-box .grade-btn.el-button.is-disabled, .grade-items-box .grade-btn.el-button.is-disabled:focus, .grade-items-box .grade-btn.el-button.is-disabled:hover {
  color: #bfcbd9;
  cursor: not-allowed;
  background: #eef1f6;
  border: 1px solid #d1dbe5;
}
.grade-items-box .grade-btn.el-button:hover {
  color: #fff;
}
.direct-grade {
  font-size: 12px;
  color: #bfcbd9;
  text-decoration: underline;
  margin-top: 10px;
  text-align: center;
  cursor: pointer;
}
.weight-editor{
  margin-top: 10px;
}
.weight-input .el-input__inner,.weight-input .el-input{
  width: 200px;
}
.weight-input .el-input{
  margin-right: 10px;
}
</style>
